
<template>
  <div>
    <div class="followup_wrapper">
      <div class="tabs_table_panel">
        <div class="patient-info-table" style="padding: 0">
          <div class="tabs_panel" style="margin-bottom: 0">
            <div class="tabs_items active_current" style="font-size: 16px">
              随访计划
            </div>
          </div>
          <el-row>
            <el-col
              :span="24"
              style="
                display: flex;
                align-items: center;
                justify-content: flex-end;
              "
            >
              <el-button
                type="primary"
                @click="openAddPlanDialog"
                class="distance"
                >新增计划</el-button
              >
              <el-button
                type="primary"
                @click="optionDialogVisibleTable('手动添加')"
                class="distance"
                >手动添加</el-button
              >
            </el-col>
          </el-row>
          <div class="tabel_wrapper">
            <el-table border :data="tableData" ref="multipleTable">
              <el-table-column width="55">
                <template slot-scope="scope">
                  <el-radio
                    :label="scope.row.planId"
                    v-model="templateRadio"
                    @change.native="getTemplateRow(scope.$index, scope.row)"
                    >{{ "" }}</el-radio
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="planName"
                label="随访计划名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="patTypeName"
                label="患者类型"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="username"
                label="创建医生"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="followCycle"
                label="随访周期"
                align="center"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.planCycleName
                    }}{{ scope.row.planFrequencyName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="planPatCount"
                label="随访计划人数"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="formName"
                label="推送随访问卷"
                align="center"
              ></el-table-column>
              <el-table-column label="操作" align="center" width="250">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="
                      patientManagement(
                        scope.row.planId,
                        scope.row.planName,
                        scope.row
                      )
                    "
                    >患者管理</el-button
                  >
                  <el-button
                    type="text"
                    style="margin-right: 10px"
                    @click="editPlan(scope.row.planId)"
                    >修改计划</el-button
                  >
                  <el-popconfirm
                    @onConfirm="
                      delPlan(scope.row.planId, scope.row.planPatCount)
                    "
                    :title="delTitle"
                  >
                    <el-button
                      slot="reference"
                      type="text"
                      @click="initDelTitle(scope.row.planPatCount)"
                      >删除计划</el-button
                    >
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="paging">
            <el-pagination
              background
              :current-page.sync="pageNum"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="total,prev, pager, next,sizes"
              :total="total"
              @size-change="changeSize"
              @current-change="changePage"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      @closed="close"
      :title="follow_up_title"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="110px"
        label-position="left"
      >
        <el-row>
          <el-form-item label="随访计划名称" prop="planName">
            <el-input
              v-model="formData.planName"
              placeholder="请输入随访计划名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="space-around" align="top">
          <el-col :span="8">
            <el-form-item
              label="患者类别"
              label-width="80px"
              prop="patTypeCode"
            >
              <el-select
                v-model="formData.patTypeCode"
                placeholder="请输入患者类别"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in patTypes"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" label-width="50px" prop="patSexCode">
              <el-radio
                v-for="item in sexs"
                v-model="formData.patSexCode"
                :key="item.code"
                :label="item.code"
                >{{ item.name }}</el-radio
              >
              <!--  <el-radio v-model="formData.patSexCode" label="1">男</el-radio>
              <el-radio v-model="formData.patSexCode" label="2">女</el-radio> -->
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label="年龄区间"
              label-width="80px"
              prop="patAgeRangeCode"
            >
              <el-select
                v-model="formData.patAgeRangeCode"
                placeholder="请选择年龄区间"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in patAgeRanges"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <span style="color: #ff4949">*</span
            ><span
              style="
                font-size: 14px;
                color: #606266;
                font-weight: 700;
                margin-bottom: 18px;
              "
              >随访周期</span
            >
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around" align="top">
          <el-col :span="11">
            <el-form-item label="持续时长" prop="planCycleCode">
              <el-select
                v-model="formData.planCycleCode"
                placeholder="请输入持续时长"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in planCycles"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="随访次数" prop="planFrequencyCode">
              <el-select
                v-model="formData.planFrequencyCode"
                placeholder="请输入随访次数"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in planFrequencys"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around" align="top">
          <el-col :span="11">
            <el-form-item label="随访日期" prop="planDateCode">
              <el-select
                v-model="formData.planDateCode"
                placeholder="请输入随访日期"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in planDates"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="随访时间" prop="planTimeCode">
              <el-select
                v-model="formData.planTimeCode"
                placeholder="请输入随访时间"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in planTimes"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="推送随访问卷" prop="formId">
            <el-select
              v-model="formData.formId"
              placeholder="请输入推送随访问卷"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in formNames"
                :key="item.questionnaireId"
                :label="item.questionnaireName"
                :value="item.questionnaireId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addPatientsPlan">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisibleTable_dialog"
      id="dialog_table"
      :title="`随访计划——${follow_up_plan_title}`"
      @closed="follow_up_plan_close"
    >
      <div style="padding: 30px 20px; background: #f5f6fa; position: relative">
        <div class="followup_wrapper">
          <div class="tabs_table_panel">
            <div class="patient-info-table">
              <el-form
                ref="elForm_table_dialog"
                :model="formData_table_dialog"
                size="small"
                label-width="70px"
                label-position="left"
              >
                <el-row>
                  <el-col
                    :span="24"
                    style="display: flex; align-items: flex-start"
                  >
                    <!-- <span style="margin-right: 20px; font-size: 14px"
                    >检索条件</span
                  > -->
                    <el-form-item label="时间范围">
                      <el-date-picker
                        v-model="date_dialog"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        style="width: 230px; margin-right: 20px"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      />
                    </el-form-item>
                    <el-form-item label="患者编号" prop="patId">
                      <el-input
                        v-model="formData_table_dialog.patId"
                        placeholder="请输入患者编号"
                        clearable
                        style="width: 180px; margin-right: 20px"
                      />
                    </el-form-item>
                    <el-form-item label="患者姓名" prop="patName">
                      <el-input
                        v-model="formData_table_dialog.patName"
                        placeholder="请输入患者姓名"
                        style="width: 180px"
                        clearable
                      />
                    </el-form-item>
                    <el-button
                      type="primary"
                      size="small"
                      @click="search"
                      class="distance"
                      >搜索</el-button
                    >
                    <el-button
                      type="primary"
                      @click="reset"
                      size="small"
                      class="distance"
                      >重置</el-button
                    >
                  </el-col>
                </el-row>
              </el-form>
              <div class="tabel_wrapper">
                <div style="position: absolute; right: 0; z-index: 999">
                  <el-button
                    v-show="activeName_dialog == 'first'"
                    @click="delFollowPlan"
                  >
                    删除随访计划
                  </el-button>
                  <el-button
                    v-show="activeName_dialog == 'second'"
                    @click="addFollowPlan"
                  >
                    添加到随访计划
                  </el-button>
                </div>
                <el-tabs
                  v-model="activeName_dialog"
                  @tab-click="handleClick_tabs_click"
                >
                  <el-tab-pane
                    label="患者管理列表"
                    name="first"
                    v-if="patientManagementListState"
                  >
                    <div v-if="activeName_dialog == 'first'">
                      <el-table
                        :data="tableData_dialogData"
                        @selection-change="handleSelectionChange"
                        max-height="400"
                        ref="firstTable"
                      >
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column
                          prop="planPatTime"
                          width="150px"
                          label="任务完成时间"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          prop="patId"
                          width="100px"
                          label="患者编号"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          prop="patName"
                          label="姓名"
                          width="100px"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          prop="patSexName"
                          width="80px"
                          label="性别"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          prop="age"
                          label="年龄"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          label="患者类别"
                          align="center"
                          width="180px"
                        >
                          <template slot-scope="scope">
                            <div>
                              {{ patTypeDictionary(scope.row.patTypeCode) }}
                            </div>
                          </template></el-table-column
                        >
                        <el-table-column label="危险等级" align="center">
                          <template slot-scope="scope">
                            <div>{{ scope.row.chronicDiseaseGrade }}</div>
                          </template></el-table-column
                        >
                        <el-table-column label="随访周期" align="center">
                          <template slot-scope="scope">
                            <div>
                              {{ scope.row.planCycleName
                              }}{{ scope.row.planFrequencyName }}
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="planPatNextFollowStartTime"
                          label="下次随访时间"
                          align="center"
                          width="180px"
                        ></el-table-column>
                        <el-table-column
                          prop="formName"
                          label="随访问卷"
                          align="center"
                          width="250px"
                        ></el-table-column>
                        <el-table-column
                          label="操作"
                          align="center"
                          width="200"
                        >
                          <template slot-scope="scope">
                            <div>
                              <el-button
                                type="text"
                                @click="
                                  viewDetails(
                                    scope.row.patId,
                                    scope.row.patTypeCode,
                                    scope.row.planId
                                  )
                                "
                                >查看详情</el-button
                              >
                              <el-button
                                type="text"
                                @click="
                                  removethebaseline(
                                    scope.row.patId,
                                    scope.row.patTypeCode,
                                    scope.row.planId
                                  )
                                "
                                >立即随访</el-button
                              >
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div></el-tab-pane
                  >
                  <el-tab-pane label="无随访计划患者" name="second">
                    <div v-if="activeName_dialog == 'second'">
                      <el-table
                        :data="tableData_dialogData_none"
                        max-height="400"
                        @selection-change="handleSelectionChangeNone"
                        ref="secondTable"
                      >
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column
                          prop="createdAt"
                          width="150px"
                          label="任务完成时间"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          prop="patId"
                          width="100px"
                          label="患者编号"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          prop="patName"
                          label="姓名"
                          width="100px"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          prop="sex"
                          width="80px"
                          label="性别"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          prop="age"
                          label="年龄"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          label="患者类别"
                          align="center"
                          width="180px"
                        >
                          <template slot-scope="scope">
                            <div>
                              {{ patTypeDictionary(scope.row.typeCode) }}
                            </div>
                          </template></el-table-column
                        >
                        <el-table-column label="危险等级" align="center">
                          <template slot-scope="scope">
                            <div>{{ scope.row.level }}级</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="操作"
                          align="center"
                          width="250"
                        >
                          <template slot-scope="scope">
                            <div>
                              <el-button
                                type="text"
                               @click="jumpsee"
                                >查看详情</el-button
                              >
                              <el-button
                                type="text"
                                @click="addFollowPlanRow(scope.row)"
                                >添加计划</el-button
                              >
                              <el-button type="text"  @click="
                                  viewDetailss(
                                    scope.row.patId,
                                    scope.row.typeCode,
                                    scope.row.planId
                                  )
                                ">立即随访</el-button>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div></el-tab-pane
                  >
                </el-tabs>
              </div>
              <div class="paging">
                <el-pagination
                  background
                  :current-page.sync="pageNum_dialog"
                  :page-sizes="pageSizes_dialog"
                  layout="total,prev, pager, next,sizes"
                  :total="total_dialog"
                  :page-size="pageSize_dialog"
                  @size-change="changeSize_dialog"
                  @current-change="changePage_dialog"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- <el-dialog
      :visible.sync="dialogVisibleTable_dialog_plan"
      id="dialog_table_plan"
      title="随访计划"
      @closed="follow_up_plan_plan_close"
    >
      <div style="padding: 30px 20px; background: #f5f6fa; position: relative">
        <div class="followup_wrapper">
          <div class="tabs_table_panel">
            <div class="patient-info-table">
              <div class="tabel_wrapper">
                <div style="position: absolute; right: 0; z-index: 999">
                  <el-button @click="addFollowPlan"> 保存 </el-button>
                </div>
                <el-tabs v-model="activeName_dialog_plan">
                  <el-tab-pane label="随访计划" name="first">
                    <div>
                      <el-table
                        :data="tableData_dialogData_plan"
                        max-height="400"
                      >
                        <el-table-column width="55">
                          <template scope="scope">
                            <el-radio
                              :label="scope.row.planId"
                              v-model="templateRadio_dialog"
                              @change.native="
                                getTemplateRow_dialog(scope.$index, scope.row)
                              "
                              >{{ "" }}</el-radio
                            >
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="planName"
                          label="随访计划名称"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          prop="patTypeName"
                          label="患者类型"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          prop="username"
                          label="创建医生"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          prop="followCycle"
                          label="随访周期"
                          align="center"
                        >
                          <template slot-scope="scope">
                            <div>
                              {{ scope.row.planCycleName
                              }}{{ scope.row.planFrequencyName }}
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div></el-tab-pane
                  >
                </el-tabs>
              </div>
              <div class="paging">
                <el-pagination
                  background
                  :current-page.sync="pageNum_dialog_plan"
                  :page-sizes="pageSizes_dialog_plan"
                  layout="total,prev, pager, next,sizes"
                  :total="total_dialog_plan"
                  :page-size="pageSize_dialog_plan"
                  @size-change="changeSize_dialog_plan"
                  @current-change="changePage_dialog_plan"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>


<script>
import {
  followYzyPlan,
  listQuestionnaire,
  saveFollowYzyPlan,
  getFollowYzyPlan,
  updateFollowYzyPlan,
  deleteFollowYzyPlan,
  getPatListByPlanId,
  patient,
  planpat,
  patients
} from "@/api/back-management/follow_up_plan";
import {
  getPatType,
  getPatAgeRange,
  getPlanCycle,
  getPlanFrequency,
  getPlanDate,
  getPlanTime,
  getSex
} from "@/api/select/index";
export default {
  name: "follow_up_plan",
  data() {
    return {
      templateRadio: "", //当前选中表格
      templateRadio_dialog: "", //弹出框选中的计划
      planId: "", //非弹出页中某条数据ID
      have_id_plan: false, //新增计划||修改计划是否携带ID
      patTypes: [], //患者类别值域
      patAgeRanges: [], //年龄区间值域
      planCycles: [], //持续时长值域
      planFrequencys: [], //随访次数值域
      planDates: [], //随访日期值域
      planTimes: [], //随访时间值域
      formNames: [], //推送随访问卷值域
      typeCode: "", //用来查无随访计划患者的数据
      sexs: [], //性别值域
      planId_addPlan: "", //当前表格计划ID
      follow_up_title: "", //新增计划&&修改计划
      activeName_dialog: "first", //弹出框的tab页的默认显示
      activeName_dialog_plan: "first", //弹出框选择随访计划
      dialogVisible: false, //新增计划表单的弹出框状态
      dialogVisibleTable_dialog: false, //手动添加弹出框的状态
      dialogVisibleTable_dialog_plan: false, //随访计划弹出框
      /* 弹出页表单字段 */
      formData: {
        planName: undefined,
        patTypeCode: undefined,
        planCycleCode: undefined,
        planFrequencyCode: undefined,
        planDateCode: "",
        planTimeCode: undefined,
        formId: undefined,
        patAgeRangeCode: "",
        patSexCode: "1"
      },
      rules: {
        planName: [
          {
            required: true,
            message: "请输入随访计划名称",
            trigger: "blur"
          }
        ],
        patTypeCode: [
          {
            required: true,
            message: "请输入患者类别",
            trigger: "change"
          }
        ],
        planCycleCode: [
          {
            required: true,
            message: "请输入持续时长",
            trigger: "change"
          }
        ],
        planFrequencyCode: [
          {
            required: true,
            message: "请输入随访次数",
            trigger: "change"
          }
        ],
        planDateCode: [
          {
            required: true,
            message: "请输入随访日期",
            trigger: "change"
          }
        ],
        planTimeCode: [
          {
            required: true,
            message: "请输入随访日期",
            trigger: "change"
          }
        ],
        formId: [
          {
            required: true,
            message: "请输入推送随访问卷",
            trigger: "change"
          }
        ],
        patAgeRangeCode: [
          {
            required: true,
            message: "请选择年龄区间",
            trigger: "change"
          }
        ],
        patSexCode: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change"
          }
        ]
      },
      /* 弹出页搜索条件 */
      date_dialog: ["", ""], // 时间范围
      formData_table_dialog: {
        patId: "",
        patName: ""
      },
      /* =================================== */
      tableData: [], // 默认显示第几页
      pageNum: 1,
      total: 0,
      pageSize: 10, //
      pageSizes: [10, 20, 50], //当前页显示数据条数
      /* 弹出框的表格当前页等数据 */
      pageSizes_dialog: [10, 20, 50], //弹出框的每个显示条数
      pageNum_dialog: 1,
      pageSize_dialog: 10,
      tableData_dialogData: [], //弹窗表格数据
      tableData_dialogData_none: [], //无随访计划患者
      total_dialog: 0,
      /* ================================= */
      //计划弹出框
      /* pageSizes_dialog_plan: [10, 20, 50], //弹出框的每个显示条数
      pageNum_dialog_plan: 1,
      pageSize_dialog_plan: 10,
      tableData_dialogData_plan: [], //弹窗表格数据
      total_dialog_plan: 0, */
      /* ================================= */
      follow_up_plan_title: "", //表格弹出框的标题动态变化
      patientManagementListState: false, //患者管理列表显示状态
      patient_management_list: [], //选中的患者管理列表
      patient_management_list_none: [], //选中的无随访计划列表
      plan_list: [], //手动添加计划勾选项
      plan_list_dialog: [], //最终的计划勾选项
      delTitle: "" //删除计划提示语
    };
  },
  created() {
    this.initData();
    getPatType().then(res => {
      this.patTypes = res.data;
    });
    getPatAgeRange().then(res => {
      this.patAgeRanges = res.data;
    });
    getPlanCycle().then(res => {
      this.planCycles = res.data;
    });
    getPlanFrequency().then(res => {
      this.planFrequencys = res.data;
    });
    getPlanDate().then(res => {
      this.planDates = res.data;
    });
    getPlanTime().then(res => {
      this.planTimes = res.data;
    });
    getSex().then(res => {
      this.sexs = res.data;
    });
    listQuestionnaire().then(res => {
      this.formNames = res.data;
    });
  },
  methods: {
    calStar(curr) {
      let pageNum;
      pageNum = (curr - 1) * this.pageSize;
      return pageNum;
    },
    calStar_dialog(curr) {
      let pageNum;
      pageNum = (curr - 1) * this.pageSize_dialog;
      return pageNum;
    },
    calStar_dialog_plan(curr) {
      let pageNum;
      pageNum = (curr - 1) * this.pageSize_dialog_plan;
      return pageNum;
    },
    search() {
      this.pageNum_dialog = 1;
      this.handleClick_tabs();
    },
    reset() {
      this.$refs.elForm_table_dialog.resetFields();
      this.date_dialog = ["", ""];
    },
    changeSize(size) {
      this.pageSize = size;
      this.pageNum = 1;
      this.initData();
    },
    changePage(page) {
      this.pageNum = page;
      this.initData();
    },
    changeSize_dialog(size) {
      this.pageSize_dialog = size;
      this.pageNum_dialog = 1;
      this.handleClick_tabs();
    },
    changePage_dialog(page) {
      this.pageNum_dialog = page;
      this.handleClick_tabs();
    },
    changeSize_dialog_plan(size) {
      this.pageSize_dialog_plan = size;
      this.pageNum_dialog_plan = 1;
      this.initData_dialog();
    },
    changePage_dialog_plan(page) {
      this.pageNum_dialog_plan = page;
      this.initData_dialog();
    },
    close() {
      this.dialogVisible = false;
      this.$refs["elForm"].resetFields();
    },
    //关闭弹窗需要将计划字段清空，防止没勾选时进入弹出页
    follow_up_plan_close() {
      this.plan_list = [];
      this.templateRadio = "";
      this.initData();
    },
    //关闭最终计划框时需要将分类初始化为1
    /*    follow_up_plan_plan_close() {
      this.templateRadio_dialog = "";
      this.plan_list_dialog = [];
    }, */

    handleClick_tabs() {
      if (this.activeName_dialog == "first") {
        this.initDataDialog();
      } else if (this.activeName_dialog == "second") {
        this.initDataDialogPatient();
      }
    },
    //初始化页码
    handleClick_tabs_click() {
      this.pageNum_dialog = 1;
      this.patient_management_list_none = [];
      this.patient_management_list = [];
      this.handleClick_tabs();
    },
    //手动添加
    optionDialogVisibleTable(title) {
      this.pageNum_dialog = 1;
      if (this.plan_list.length == 1) {
        this.activeName_dialog = "second";
        this.patientManagementListState = false;
        this.dialogVisibleTable_dialog = true;
        this.follow_up_plan_title = title;
        this.initDataDialogPatient();
      } else {
        this.$message({
          message: "请选择一条随访计划!",
          type: "warning"
        });
      }
    },
    /* 跳转页面调用方法*/
    jumpsee(row) {
      row.patientId = row.pid
      row.sourcePage = 'ArchiveSetting'
      this.$router.push({
        name: 'patientsList',
        params: row
      })
    },
    //点击患者管理
    patientManagement(planId, title, row) {
      this.pageNum_dialog = 1;
      this.plan_list = [row]; //当点击表格患者管理时优先级最高
      this.planId = planId;
      this.activeName_dialog = "first";
      this.patientManagementListState = true;
      this.dialogVisibleTable_dialog = true;
      this.follow_up_plan_title = title;
      this.typeCode = row.patTypeCode;
      this.initDataDialog();
    },
    //点击新增计划弹出增加计划表单
    openAddPlanDialog() {
      this.dialogVisible = true;
      this.have_id_plan = false;
      this.follow_up_title = "新增自动随访计划";
      this.$refs["elForm"].resetFields();
    },
    //修改计划时数据回显
    editPlan(planId) {
      this.planId_addPlan = planId;
      this.have_id_plan = true;
      this.dialogVisible = true;
      this.follow_up_title = "修改自动随访计划";
      getFollowYzyPlan({ planId: planId }).then(res => {
        console.log(res);
        this.formData.planName = res.data.planName;
        this.formData.patTypeCode = res.data.patTypeCode;
        this.formData.patSexCode = res.data.patSexCode;
        this.formData.patAgeRangeCode = res.data.patAgeRangeCode;
        this.formData.planCycleCode = res.data.planCycleCode;
        this.formData.planFrequencyCode = res.data.planFrequencyCode;
        this.formData.planDateCode = res.data.planDateCode;
        this.formData.planTimeCode = res.data.planTimeCode;
        this.formData.formId = res.data.formId;
      });
    },
    //删除计划
    delPlan(planId, planPatCount) {
      if (planPatCount != 0) {
        return;
      } else {
        deleteFollowYzyPlan({ planId: planId }).then(res => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.initData();
          } else {
            this.$message({
              message: "删除失败",
              type: "error"
            });
          }
        });
      }
    },
    //初始化提示语
    initDelTitle(planPatCount) {
      if (planPatCount != 0) {
        this.delTitle = "提示：该计划有随访患者，请删除随访患者后再删除计划";
      } else {
        this.delTitle = "提示：删除计划后无法恢复，请确定是否删除？";
      }
    },
    //获取患者管理列表的勾选项
    handleSelectionChange(data) {
      this.patient_management_list = data.map(item => {
        return { planPatId: item.planPatId };
      });
    },
    //获取无随访计划列表的勾选项
    handleSelectionChangeNone(data) {
      this.patient_management_list_none = data;
    },
    //打开随访计划菜单
    /*  openFollowPlan() {
      if (this.patient_management_list_none.length == 0) {
        this.$message({
          message: "请选择至少一名患者!",
          type: "warning",
        });
      } else {
        this.dialogVisibleTable_dialog_plan = true;
        this.pageNum_dialog_plan = 1;
        this.initData_dialog();
      }
    }, */
    //保存添加到随访计划
    /*  addFollowPlan() {
      if (this.plan_list_dialog.length == 1) {
        let params = {
          followYzyPlan: this.plan_list_dialog[0],
          patientsList: this.patient_management_list_none,
        };
        patients(params).then((res) => {
          if (res.code == 200) {
            this.dialogVisibleTable_dialog_plan = false;
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.initDataDialogPatient();
          } else {
            this.$message({
              message: "添加失败",
              type: "error",
            });
          }
        });
      } else {
        this.$message({
          message: "请选择一条随访计划!",
          type: "warning",
        });
      }
    }, */
    //添加到随访计划
    addFollowPlan() {
      if (this.patient_management_list_none.length == 0) {
        this.$message({
          message: "请选择一名患者!",
          type: "warning"
        });
      } else {
        let params = {
          followYzyPlan: this.plan_list[0],
          patientsList: this.patient_management_list_none
        };
        patients(params).then(res => {
          if (res.code == 200) {
            this.dialogVisibleTable_dialog_plan = false;
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.initDataDialogPatient();
          } else {
            this.$message({
              message: "添加失败",
              type: "error"
            });
          }
        });
      }
    },
    //查看详情
    viewDetails(patId, typeCode, planId) {
       let a=sessionStorage.setItem("follow_status", "true");
      let b=sessionStorage.setItem("cancel_status", "false");
      let c=sessionStorage.setItem("complete_status", "false");
       sessionStorage.setItem("state", "1");
      sessionStorage.setItem("add_button_status", "");
      this.$router.push({
        name: "followUpDetails",
        query: {
          activeName: "first",
          patId: patId,
          memPatTypeCodes: typeCode,
          planId: planId,
          follow_status: true,
          cancel_status: false,
          complete_status: false
        }
      });
    },
    //无计划的立即随访
    viewDetailss(patId, typeCode, planId) {
       let a=sessionStorage.setItem("follow_status", "false");
      let b=sessionStorage.setItem("cancel_status", "true");
      let c=sessionStorage.setItem("complete_status", "true");
      sessionStorage.setItem("state", "2");
       sessionStorage.setItem("add_button_status", "true");
      console.log(this.planId,"planId")
      this.$router.push({
        name: "followUpDetails",
        query: {
          activeName: "first",
          patId: patId,
          memPatTypeCodes: typeCode,
          planId: this.planId,
          follow_status: false,
          cancel_status: true,
          complete_status: true
        }
      });
    },
    //立即随访
    removethebaseline(patId, typeCode, planId) {
     let a=sessionStorage.setItem("follow_status", "false");
      let b=sessionStorage.setItem("cancel_status", "true");
      let c=sessionStorage.setItem("complete_status", "true");
      sessionStorage.setItem("add_button_status", "true");
      sessionStorage.setItem("state", "2");
      this.$router.push({
        name: "followUpDetails",
        query: {
          add_button_status:true,//立即随访
          activeName: "first",
          patId: patId,
          memPatTypeCodes: typeCode,
          planId: planId,
          follow_status: false,
          cancel_status: true,
          complete_status: true
        }
      });
    },
    //表格内添加到计划
    addFollowPlanRow(row) {
      
      let params = {
        followYzyPlan: this.plan_list[0],
        patientsList: [row]
      };
      patients(params).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.initDataDialogPatient();
        } else {
          this.$message({
            message: "添加失败",
            type: "error"
          });
        }
      });
    },
    //患者类别数据字典
    patTypeDictionary(code) {
      let arr = this.patTypes.filter(item => {
        return code == item.code;
      });
      return arr[0].name;
    },
    getTemplateRow(index, row) {
      this.plan_list = [row];
    },
    //最后选的计划
    /* getTemplateRow_dialog(index, row) {
      this.plan_list_dialog = [row];
    }, */
    //删除随访计划
    delFollowPlan() {
      if (this.patient_management_list.length == 0) {
        this.$message({
          message: "请选择至少一名患者!",
          type: "warning"
        });
      } else {
        let params = {
          followYzyPlanPatList: this.patient_management_list
        };
        planpat(params).then(res => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.initDataDialog();
          } else {
            this.$message({
              message: "删除失败",
              type: "error"
            });
          }
        });
      }
    },
    //新增计划保存按钮
    addPatientsPlan() {
      this.$refs.elForm.validate(valid => {
        if (valid) {
          let params = {
            ...this.formData,
            patTypeName: this.getName(this.patTypes, this.formData.patTypeCode),
            planCycleName: this.getName(
              this.planCycles,
              this.formData.planCycleCode
            ),
            planFrequencyName: this.getName(
              this.planFrequencys,
              this.formData.planFrequencyCode
            ),
            planTimeName: this.getName(
              this.planTimes,
              this.formData.planTimeCode
            ),
            planDateName: this.getName(
              this.planDates,
              this.formData.planDateCode
            ),
            formName: this.getFormId(this.formNames, this.formData.formId),
            patSexName: this.getName(this.sexs, this.formData.patSexCode),
            patAgeRangeName: this.getName(
              this.patAgeRanges,
              this.formData.patAgeRangeCode
            )
          };
          if (this.have_id_plan) {
            params.planId = this.planId_addPlan;
            updateFollowYzyPlan(params).then(res => {
              if (res.code == 200) {
                this.dialogVisible = false;
                this.$message({
                  message: "保存成功",
                  type: "success"
                });
                this.initData();
              } else if (res.code == 512) {
                this.$message({
                  message: res.message,
                  type: "error"
                });
              }
            });
          } else {
            saveFollowYzyPlan(params).then(res => {
              if (res.code == 200) {
                this.dialogVisible = false;
                this.$message({
                  message: "保存成功",
                  type: "success"
                });
                this.initData();
              } else if (res.code == 512) {
                this.$message({
                  message: res.message,
                  type: "error"
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //获取值域名称
    getName(arry, code) {
      let arr;
      arr = arry.filter(item => {
        return item.code == code;
      });
      return arr[0].name;
    },
    //获取推送随访问卷ID
    getFormId(arry, code) {
      let arr;
      arr = arry.filter(item => {
        return item.questionnaireId == code;
      });
      return arr[0].questionnaireName;
    },
    //非弹出页表格数据
    initData() {
      let params = {
        length: this.pageSize,
        start: this.calStar(this.pageNum)
      };
      followYzyPlan(params).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.count;
      });
    },
    //弹出页随访计划数据
    /*  initData_dialog() {
      let params = {
        length: this.pageSize_dialog_plan,
        start: this.calStar_dialog_plan(this.pageNum_dialog_plan),
      };
      followYzyPlan(params).then((res) => {
        this.tableData_dialogData_plan = res.data.list;
        this.total_dialog_plan = res.data.count;
      });
    }, */
    //患者管理弹出框表格数据
    initDataDialog() {
      let params = {
        ...this.formData_table_dialog,
        dateStart:
          this.date_dialog == null
            ? ""
            : this.date_dialog[0]
            ? this.date_dialog[0]
            : "",
        dateEnd:
          this.date_dialog == null
            ? ""
            : this.date_dialog[0]
            ? this.date_dialog[1]
            : "",
        planId: this.planId,
        length: this.pageSize_dialog,
        start: this.calStar(this.pageNum_dialog)
      };
      getPatListByPlanId(params).then(res => {
        if (res.code == 200) {
          this.tableData_dialogData = res.data.list;
          this.total_dialog = res.data.count;
        } else {
          this.tableData_dialogData = [];
          this.total_dialog = 0;
        }
      });
    },
    //无随访计划患者弹出框表格数据
    initDataDialogPatient() {
      let params = {
        ...this.formData_table_dialog,
        dateStart:
          this.date_dialog == null
            ? ""
            : this.date_dialog[0]
            ? this.date_dialog[0]
            : "",
        dateEnd:
          this.date_dialog == null
            ? ""
            : this.date_dialog[0]
            ? this.date_dialog[1]
            : "",
        length: this.pageSize_dialog,
        start: this.calStar(this.pageNum_dialog),
        planId: this.plan_list[0].planId,
        typeCode: this.typeCode
      };
      patient(params).then(res => {
        if (res.code == 200) {
          this.tableData_dialogData_none = res.data.list;
          this.total_dialog = res.data.count;
        } else {
          this.tableData_dialogData_none = [];
          this.total_dialog = 0;
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.tabs_panel {
  display: flex;
  margin-bottom: 15px;

  .tabs_items {
    font-size: 18px;
    font-weight: bold;
    color: #a1a8b3;
    margin-right: 40px;
    cursor: pointer;
    &.active_current {
      color: #32353b;
      span {
        color: #05afc8;
      }
    }
  }
}

.followup_wrapper {
  background: rgb(245, 246, 250);
  display: flex;
  display: -webkit-box;
  justify-content: space-between;
}
.tabs_table_panel {
  flex: 1;
  background: #fff;
}
/**搜索栏输入框**/
.input_one {
  width: 230px;
}
.long {
  width: 150px;
  color: #000;
}
.distance {
  margin-left: 18px;
}

.patient-info-table {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}
.paging {
  margin-top: 20px;
  margin-left: 9px;
  padding-bottom: 20px;
}
.tabel_wrapper {
  margin-top: 15px;
  position: relative;
}
</style>
<style lang="scss">
.el-pager li {
  background: #ffffff;
  border: 1px solid #e4e7ed;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #fff;
  color: #05afc8;
}
.el-input__inner {
  color: #000;
}
#dialog_table > .el-dialog {
  width: 90vw;
  margin-top: 8vh !important;
}
#dialog_table .el-tabs__nav-wrap {
  width: calc(100% - 150px);
}
#dialog_table_plan > .el-dialog {
  width: 90vw;
  margin-top: 8vh !important;
}
#dialog_table_plan .el-tabs__nav-wrap {
  width: calc(100% - 75px);
}
</style>


